<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>用户协议生成</title>
	</head>
	<body>
		<div style="display: flex;flex-direction: column;">

			<input id="filePicker" onchange="readFile()" type="file" name="myfile" accept=".txt">
			<div>Html文本</div>
			<textarea id="story" name="story" rows="15" cols="60">
			</textarea>
		</div>
		<script>
			function readFile() {
				var reader = new FileReader();
				reader.onload = function() {
					//alert(this.result)
					let today = new Date().toLocaleDateString()
					let htmlStr = '<!DOCTYPE html>\n'
					htmlStr += '<html lang="en">\n'
					htmlStr += '<head>\n'
					htmlStr += '<meta charset="UTF-8" />\n'
					htmlStr += '<meta http-equiv="X-UA-Compatible" content="IE=edge" />\n'
					htmlStr += '<meta name="viewport" content="width=device-width, initial-scale=1.0" />\n'
					const textArr = this.result.split('\n')
					htmlStr += '<title>'
					htmlStr += textArr[0]
					htmlStr += '</title>\n</head>\n'
					htmlStr += '<style>\n'
					htmlStr += '.p_body {width: 90%;margin: 0 auto;font-weight: normal;}\n'
					htmlStr += '.p_title {padding-top: 2rem;line-height: 4rem;'
					htmlStr += 'text-align: center;font-size: 1.5rem;color: #333;font-weight: 500;}\n'
					htmlStr += '.p_content {margin-bottom: 3rem;}\n'
					htmlStr += '.p_text {font-size: 1rem;line-height: 2rem;color: #444;margin: 0 0 10px 0; display: flex;text-align: justify;text-indent: 2em;}\n'
					htmlStr += '.p_date {font-size: 1rem;line-height: 2rem;color: #444;text-align:right;margin: 0 0 20px 0;}\n'
					htmlStr += '</style>\n'
					htmlStr += '<body>\n'
					htmlStr += '<div class="p_body">\n'
					htmlStr += '<div class="p_title">\n'
					htmlStr += textArr[0]
					htmlStr += '</div>\n'
					htmlStr += '<div class="p_content">\n'
					htmlStr += '<p class="p_date">\n'
					htmlStr += '上线日期：'
					htmlStr += today
					htmlStr += '</p>\n'
					htmlStr += '<p class="p_date">\n'
					htmlStr += '生效日期：'
					htmlStr += today
					htmlStr += '</p>\n'
					textArr.forEach((item, index) => {
						if (index > 0)
							htmlStr += `<div class="p_text">${item}</div>\n`
					})
					htmlStr += `</div></div></body></html>`
					story.value = htmlStr
				}
				var f = document.getElementById("filePicker").files[0];
				reader.readAsText(f);
			}

			console.log(text)

			console.log(htmlStr)
		</script>
	</body>
</html>
